<template>
    <ClientOnly>
        <popup
            :show="visible"
            width="560px"
            title="创建MCP"
            :async-close="true"
            @close="emits('close')"
            @confirm="handleSubmit"
        >
            <div class="p-6 pb-0">
                <el-form class="layout-forms" :model="formData" :rules="formRules" label-position="top">
                    <el-form-item label="MCP名称" prop="name">
                        <el-input v-model="formData.name" placeholder="请输入MCP名称" maxlength="20" />
                    </el-form-item>
                    <el-form-item label="MCP地址" prop="url">
                        <div class="flex items-center w-full">
                            <el-input
                                v-model="formData.url"
                                placeholder="请输入MCP地址"
                                class="flex-1 mr-2"
                            />
                            <el-button
                                :loading="parserLoading"
                                class="!h-[37px]"
                                @click="handleParser"
                            >解析</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="工具列表" prop="tools" required>
                        <div class="max-w-full border rounded-lg w-full">
                            <el-table :data="formData.tools" height="250">
                                <el-table-column prop="name" label="名称" width="180">
                                    <template #default="scope: { row: McpToolsResponse }">
                                        <p class="text-xs font-medium truncate">
                                            {{ scope.row.name }}
                                        </p>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="description" label="描述">
                                    <template #default="scope: { row: McpToolsResponse }">
                                        <p class="text-xs font-medium truncate">
                                            {{ scope.row.description }}
                                        </p>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="description" width="70" label="状态">
                                    <template #default="scope: { row: McpToolsResponse }">
                                        <el-switch
                                            v-model="scope.row.is_enable"
                                            inline-prompt
                                            active-text="开"
                                            inactive-text="关"
                                        />
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </popup>
    </ClientOnly>
</template>

<script setup lang="ts">
import mcpClientApi from '~/api/agent/mcp/client'
import feedback from '~/utils/feedback'

const emits = defineEmits(['confirm', 'close'])

const formRef = ref()
const visible = ref<boolean>(false)
const loading = ref<boolean>(false)

const parserUrl = ref<string>('')
const parserLoading = ref<boolean>(false)

// 表单数据
const formData = reactive<any>({
    // MCP地址
    url: '',
    // MCP名称
    name: '',
    // MCP工具
    tools: [] as McpToolsResponse[]
})

// 表单规则
const formRules = reactive({
    name: [
        { required: true, message: 'MCP名称不能为空', trigger: 'blur' },
        { max: 100, message: 'MCP名称不能大于100个字符', trigger: 'blur' }
    ],
    url: [
        { required: true, message: 'MCP地址不能为空', trigger: 'blur' }
    ]
})

/**
 * 获取工具
 */
const handleParser = async () => {
    if (!formData.url) {
        return feedback.msg('请输入MCP地址')
    }

    try {
        parserLoading.value = true
        formData.tools = await mcpClientApi.get_tools(formData.url)
            .finally(() => {
                parserLoading.value = false
            })
        parserUrl.value = formData.url
    } catch {}
}

/**
 * 提交表单
 */
const handleSubmit = async () => {
    if (!formData.name) {
        return feedback.msg('请填写MCP名称')
    }

    if (formData.tools.length <= 0) {
        return feedback.msg('请获取MCP工具')
    }

    let enable = false
    for (let i = 0; i < formData.tools.length; i++) {
        if (formData.tools[i].is_enable) {
            enable = true
            break
        }
    }

    if (!enable) {
        return feedback.msgError('请至少保证有一个工具是启用状态!')
    }

    await formRef.value?.validate()

    loading.value = true
    await mcpClientApi.add(formData)
        .finally(() => {
            loading.value = false
        })

    emits('close')
    emits('confirm')
    visible.value = false
    feedback.msgSuccess('创建成功')
}

const open = () => {
    visible.value = true
}

defineExpose({
    open
})
</script>


